<script setup>
import { select_inquiry_doctor as selectInquiryDoctor } from "@/api/inquiry/list"
import { reactive, ref } from 'vue'
const emit = defineEmits(['addDoctorForParent'])
const doctor = reactive({
  list: [{name:"李鑫", id: 1}, {name:"李鑫2", id: 2}],
  selList: [],
  selIds: [],
  keyword: ""
})
const isIndeterminate = ref(false)
const checkAll = ref(false)
const props = defineProps({
})
const doctorDialogVisible = ref(false)
const handleCheckAllChange = (val) => {
  doctor.selList = val ? doctor.list : []
  doctor.selIds = val ? doctor.list.map(item=>item.id) : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === doctor.list.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < doctor.list.length
}
const screenClick = async() => {
  const res = await selectInquiryDoctor({ name: doctor.keyword });
  doctor.list = res.data
}
const closeDoctorDialog = () => {
  doctorDialogVisible.value = false
}
const openDialog = () => {
  doctorDialogVisible.value = true
}
const addDoctor = () => {
  emit("addDoctorForParent", doctor.selList, doctor.selIds)
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="doctorDialogVisible" title="搜索医生" width="700px">
    <div class="qlb-search mb-20">
      <el-input class="w-300 mr-20" placeholder="请输入医生姓名" clearable v-model="doctor.keyword"></el-input>
      <el-button type="primary" @click="screenClick">筛选</el-button>
    </div>
    <div class="qlb-list i-scrollbar-hide">
      <div class="qlb-list-box pl-10">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
      </div>
      <el-checkbox-group
        v-model="doctor.selIds"
        @change="handleCheckedCitiesChange"
      >
        <div class="qlb-lc-box flex justify-start items-center" v-for="d in doctor.list" :key="d">
          <el-checkbox :label="d.name" :value="d.id">
          </el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDoctorDialog">取消</el-button>
        <el-button type="primary" @click="addDoctor">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.qlb-list-box {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e1e1e1;
}
.qlb-lc-box {
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid #e1e1e1;
}
</style>
